<template>
  <span class="data-pool">
    <el-button icon="el-icon-plus" @click="handelDialog">{{ btnText }}</el-button>
    <el-dialog width="90%" top="50px" title="数据池" :visible.sync="showDialog" append-to-body>
      <el-button
        icon="el-icon-plus"
        type="success"
        @click="addEmptyData"
        style="margin-bottom: 10px;"
      >
        直接添加一个空数据,加几个就点几下
      </el-button>
      <el-tabs v-model="activeTab" tab-position="left" @tab-click="clear" style="height: 70vh">
        <el-tab-pane
          :label="item.label"
          :name="item.name"
          lazy
          v-for="(item, index) in poolTypes"
          :key="index"
        >
          <search-list
            :ref="item.name"
            :api-url="item.url"
            :option="allSearchOption[item.name]"
            :itemPerRow="6"
            :row-key="getRowKey(item)"
            @selection-change="selectionChange"
            :beforeQuery="poolDbeforeQuery"
          >
            <el-table-column type="selection" :reserve-selection="true"></el-table-column>
            <!-- 合集 -->
            <template v-if="item.name === 'courses'">
              <el-table-column prop="courseId" label="courseId"></el-table-column>
              <el-table-column prop="title" label="合集标题"></el-table-column>
              <el-table-column prop="nickname" label="教师昵称"></el-table-column>
              <el-table-column
                prop="level"
                label="课程难度"
                :formatter="formatLevel"
              ></el-table-column>
              <el-table-column prop="cover" label="合集封面">
                <template slot-scope="scope">
                  <img class="cover" :src="scope.row.cover" />
                </template>
              </el-table-column>
              <el-table-column prop="lessionCnt" label="教学课讲数"></el-table-column>
            </template>
            <!-- 名师 -->
            <template v-if="item.name === 'teachers'">
              <el-table-column prop="showid" label="showid" width="100"></el-table-column>
              <el-table-column prop="nickname" label="名师昵称"></el-table-column>
              <el-table-column prop="avatar" label="头像">
                <template slot-scope="scope">
                  <img class="cover" :src="scope.row.avatar" />
                </template>
              </el-table-column>
            </template>
            <!-- 创作者 -->
            <template v-if="item.name === 'jimu-creator'">
              <el-table-column prop="uuid" label="用户id"></el-table-column>
              <el-table-column prop="nickname" label="创作者名称"></el-table-column>
              <el-table-column label="身份认证">
                <template slot-scope="scope">
                  <span>
                    {{
                      $selectFormat['identifiedShow'](
                        scope.row.jmPerson + '' + scope.row.jmTeam + scope.row.ktTeacher,
                      ).label
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="fansCnt" label="粉丝数"></el-table-column>
              <el-table-column prop="followCnt" label="收藏数"></el-table-column>
              <el-table-column prop="workCnt" label="作品数"></el-table-column>
            </template>
            <!-- 作品 -->
            <template v-if="item.name === 'jimu-works'">
              <el-table-column label="图文名称">
                <template slot-scope="scope">
                  <el-row>
                    <el-col :span="8">
                      <img :src="`${scope.row.cover}?x-oss-process=image/resize,w_200,h_200`" />
                    </el-col>
                    <el-col :span="8">
                      <span>{{ scope.row.title }}</span>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column prop="workId" label="作品id" width="100"></el-table-column>
              <el-table-column label="身份认证">
                <template slot-scope="scope">
                  <span>
                    {{
                      $selectFormat['identifiedShow'](
                        scope.row.jmPerson + '' + scope.row.jmTeam + scope.row.ktTeacher,
                      ).label
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="nickname" label="创作者名称"></el-table-column>
              <el-table-column prop="viewCnt" label="浏览数" width="100"></el-table-column>
              <el-table-column prop="followCnt" label="收藏数"></el-table-column>
              <el-table-column prop="likeCnt" label="点赞数"></el-table-column>
              <el-table-column prop="updatedAt" label="更新时间"></el-table-column>
            </template>
            <!-- 分类 -->
            <template v-if="item.name === 'jimu-category'">
              <el-table-column prop="id" label="id" width="100"></el-table-column>
              <el-table-column prop="title" label="分类名称"></el-table-column>
              <el-table-column prop="bgImgurl" label="分类图片">
                <template slot-scope="scope">
                  <img class="cover" :src="scope.row.bgImgurl" />
                </template>
              </el-table-column>
            </template>
            <!-- 单视频 -->
            <template v-if="item.name === 'videos'">
              <el-table-column prop="showVideoId" label="视频ID"></el-table-column>
              <el-table-column prop="nickname" label="创作者名称"></el-table-column>
              <el-table-column label="身份认证">
                <template slot-scope="scope">
                  <span>
                    {{
                      $selectFormat['identifiedShow'](
                        scope.row.jmPerson + '' + scope.row.jmTeam + scope.row.ktTeacher,
                      ).label
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题"></el-table-column>
              <el-table-column prop="payPrice" label="付费价格">
                <template slot-scope="scope">{{ scope.row.payPrice | price }}</template>
              </el-table-column>
              <el-table-column
                prop="cate"
                label="视频类别"
                :formatter="formatCate"
              ></el-table-column>
              <el-table-column
                prop="kind"
                label="视频类型"
                :formatter="formatKind"
              ></el-table-column>
              <el-table-column
                prop="level"
                label="课程难度"
                :formatter="formatLevel"
              ></el-table-column>
            </template>

            <!-- 学习路径 -->
            <template v-if="item.name === 'jimu-learnpath'">
              <el-table-column prop="id" label="学习路径ID" show-overflow-tooltip></el-table-column>
              <el-table-column
                prop="title"
                label="学习路径名称"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column prop="summary" label="学习路径介绍"></el-table-column>
              <el-table-column prop="payMode" label="付费类型" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ $selectFormat['paySl'](scope.row.payMode).label }}
                </template>
              </el-table-column>
              <el-table-column prop="priceStr" label="价格" show-overflow-tooltip>
                <template slot-scope="scope">￥{{ scope.row.priceStr }}</template>
              </el-table-column>
            </template>

            <!-- 训练营 -->
            <template v-if="item.name === 'camps'">
              <el-table-column prop="id" label="ID"></el-table-column>
              <el-table-column prop="title" label="标题"></el-table-column>
              <el-table-column
                prop="level"
                label="课程难度"
                :formatter="formatLevel"
              ></el-table-column>
              <el-table-column prop="cover" label="封面">
                <template slot-scope="scope">
                  <img :src="scope.row.cover" />
                </template>
              </el-table-column>
              <el-table-column prop="updatedAt" label="修改时间"></el-table-column>
            </template>

            <!-- 商品 -->
            <template v-if="item.name === 'jimu-goods'">
              <el-table-column prop="productId" label="ID"></el-table-column>
              <el-table-column prop="title" label="名称"></el-table-column>
              <el-table-column prop="cover" label="图片">
                <template slot-scope="scope">
                  <img :src="scope.row.cover" />
                </template>
              </el-table-column>
              <el-table-column prop="price" label="价格"></el-table-column>
              <el-table-column prop="showPrice" label="划线价格"></el-table-column>
            </template>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="selectOne(scope.row)">选择这个</el-button>
                <el-button @click="selectWithWork(scope.row)" v-if="activeTab === 'jimu-creator'">
                  选作品
                </el-button>
              </template>
            </el-table-column>
            <div slot="btn-after" class="btn-after">
              <el-button @click="selectMulti" v-if="multipleSelection.length">
                确定选这{{ multipleSelection.length }}个
              </el-button>
            </div>
          </search-list>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog
      title="作品列表"
      :visible.sync="dialogVisible"
      width="70%"
      :append-to-body="true"
      v-if="dialogVisible"
    >
      <search-list
        ref="workpoolWorkList"
        :api-url="$url.WorkpoolWorkList"
        :itemprop="8"
        @selection-change="selectionChangeWork"
        :beforeQuery="beforeQuery"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="图文名称">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="8">
                <img :src="`${scope.row.cover}?x-oss-process=image/resize,w_200,h_200`" />
              </el-col>
              <el-col :span="8">
                <span>{{ scope.row.title }}</span>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="workId" label="作品id" width="100"></el-table-column>
        <el-table-column prop="viewCnt" label="浏览数" width="100"></el-table-column>
        <el-table-column prop="followCnt" label="收藏数"></el-table-column>
        <el-table-column prop="likeCnt" label="点赞数"></el-table-column>
        <el-table-column prop="updatedAt" label="更新时间"></el-table-column>
        <div slot="btn-after" class="btn-after" slot-scope="scope">
          <el-button
            type="primary"
            :disabled="scope.selectedData.length == 0"
            @click="selectWork(scope.row)"
          >
            选择这几条
          </el-button>
        </div>
      </search-list>
    </el-dialog>
  </span>
</template>

<script>
  import { formatJumpUrl } from '../utils/index';
  export default {
    props: {
      type: {
        type: String,
        default: '',
      },
      // 按钮文案
      btnText: {
        type: String,
        default: '选择数据',
      },
    },
    components: {},
    data() {
      return {
        // 作品筛选
        workOrderSl: [
          { value: '0', label: '收藏数' },
          { value: '1', label: '点赞数' },
        ],
        // 所有的筛选
        allSearchOption: {
          courses: [],
          teachers: [],
          videos: [
            {
              type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
              name: 'nickname',
              label: '输入昵称查询',
            },
            {
              type: 'identifiedSl',
              name: 'identified',
              label: '身份认证',
            },
          ],
          'jimu-creator': [
            {
              type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
              name: 'nickname',
              label: '输入昵称查询',
            },
            {
              type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
              name: 'uuid',
              label: '输入用户id查询',
            },
            {
              type: 'creatorSl',
              name: 'order',
              label: '排序',
            },
            {
              type: 'identifiedSl',
              name: 'identified',
              label: '身份认证',
            },
          ],
          'jimu-works': [
            {
              type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
              name: 'title',
              label: '输入作品名称查询',
            },
            {
              type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
              name: 'workId',
              label: '输入作品ID查询',
            },
            {
              type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
              name: 'nickname',
              label: '创作者名称',
            },
            {
              type: 'workSl',
              name: 'workType',
              label: '作品类型',
            },
            {
              type: 'workOrderSl',
              name: 'order',
              label: '排序',
            },
            {
              type: 'identifiedSl',
              name: 'identified',
              label: '身份认证',
            },
          ],
          'jimu-category': [],
          'jimu-learnpath': [],
          'jimu-goods':[],
        },
        // list
        poolTypes: [
          {
            label: '精选合集',
            name: 'courses',
            url: this.$url.PoolCourses,
          },
          {
            label: '名师',
            name: 'teachers',
            url: this.$url.AssetUserTeachers,
          },
          {
            label: '精选视频',
            name: 'videos',
            url: this.$url.PoolVideos,
          },
          {
            label: '积幕创作者',
            name: 'jimu-creator',
            url: this.$url.WorkpoolCreatorList,
          },
          {
            label: '作品',
            name: 'jimu-works',
            url: this.$url.WorkpoolWorkList,
          },
          {
            label: '分类',
            name: 'jimu-category',
            url: this.$url.JmCategoryList,
          },
          {
            label: '学习路径',
            name: 'jimu-learnpath',
            url: this.$url.SaleProductPoolLearnPaths,
          },
          {
            label: '商品',
            name: 'jimu-goods',
            url: this.$url.MallProductList,
          },
          // {
          //   label: '特训营',
          //   name: 'camps',
          //   url: this.$url.CampList,
          // },
        ],
        // 作品列表显影
        dialogVisible: false,
        selectedData: [],
        // 数据池显影
        showDialog: false,
        uuid: '',
        creator: {
          creators: [],
          works: [],
        },
        work: {
          creators: [],
          works: [],
        },
        category: {
          categories: [],
        },
        activeTab: this.type || 'courses',
        // 已勾选数据
        multipleSelection: [],
      };
    },
    watch: {
      activeTab(newV) {},
    },
    methods: {
      // 筛选之前
      poolDbeforeQuery({ searchInfo }) {
        searchInfo.jmPerson = 0;
        searchInfo.jmTeam = 0;
        searchInfo.ktTeacher = 0;
        if (searchInfo.identified) {
          var identifies = searchInfo.identified.split(',');
          identifies.forEach((identify) => {
            searchInfo.jmPerson = identify == 'jmPerson' ? 1 : 0;
            searchInfo.jmTeam = identify == 'jmTeam' ? 1 : 0;
            searchInfo.ktTeacher = identify == 'ktTeacher' ? 1 : 0;
          });
        }
      },
      addEmptyData() {
        this.$emit('select', [], this.activeTab);
        this.$notify({
          message: '添加成功一个!',
          type: 'success',
        });
      },
      handelDialog() {
        this.showDialog = !this.showDialog;
      },
      // 表格多选
      selectionChange(val) {
        this.multipleSelection = val;
      },
      // 选择多个数据
      selectMulti() {
        if (this.multipleSelection.length) {
          if (this.activeTab === 'jimu-category') {
            this.category.categories = this.multipleSelection;
            this.$emit('select', [this.category], this.activeTab);
            this.clear();
            this.showDialog = false;
          } else {
            this.formatSelectData(this.multipleSelection);
            this.clear();
            this.showDialog = false;
          }
        } else {
          this.$message.warning('你还没有选哦');
        }
      },
      // 选择某个
      selectOne(item) {
        if (this.activeTab === 'jimu-creator') {
          item.works = [];
        }
        this.showDialog = false;
        this.formatSelectData([item]);
      },
      //选择某个作者下的作品
      selectWithWork(item) {
        if (this.activeTab === 'jimu-creator') {
          this.uuid = item.uuid;
          this.dialogVisible = true;
          this.creator = item;
        }
      },
      formatSelectData(arr) {
        const keys = {
          videos: 'showVideoId',
          courses: 'courseId',
          teachers: 'showid',
        };
        arr.map((item) => {
          // 这里的targetId好像没啥用
          item.targetId = item[keys[this.activeTab]];
          item.targetType = this.activeTab;
          item.jumpUrl = formatJumpUrl(item);
        });
        this.$emit('select', arr, this.activeTab);
      },
      // 作品列表
      beforeQuery({ searchInfo }) {
        searchInfo.uid = this.uuid;
      },
      // 作品列表筛选
      selectionChangeWork(val) {
        this.selectedData = [...val];
      },
      // 作品列表选择之后
      selectWork() {
        this.creator.works = this.selectedData.map((data) => {
          data.targetType = '作品';
          data.id = data.workId;
          data.jumpUrl = 'mtjimu://works?id=' + data.workId;
          return data;
        });
        this.dialogVisible = false;
        this.showDialog = false;
        this.selectedData = [];
        this.$emit('select', [this.creator], this.activeTab);
      },
      // 切换tab/选择数据后清空已选
      clear() {
        if (this.$refs[this.activeTab] && this.$refs[this.activeTab][0]) {
          this.$refs[this.activeTab][0].$refs['search-table'].clearSelection();
        }
        this.multipleSelection = [];
      },
      // 不同 table 不同 rowkey
      getRowKey(item) {
        const keys = {
          videos: 'videoId',
          courses: 'id',
          teachers: 'uuid',
          'jimu-creator': 'uuid',
          'jimu-works': 'workId',
          'jimu-category': 'id',
          'jimu-learnpath': 'learnPathId',
          'jimu-goods': 'productId',
        };
        return keys[item.name];
      },
      // 格式化文本
      formatCate(row) {
        return this.$ENUMS.Cate[row.cate];
      },
      formatLevel(row) {
        return this.$ENUMS.Level[row.level];
      },
      formatKind(row) {
        return this.$ENUMS.Kind[row.kind];
      },
    },
  };
</script>

<style lang="less" scoped>
  .cover {
    width: 200px;
  }

  /deep/ .el-tabs__content {
    height: 100%;
    overflow-y: scroll;
  }
  .btn-after {
    display: flex;
  }
</style>
